<template>
  <div style="padding: 70px">
    <a-form>
      <a-row :gutter="16">
        <a-col :span="5">
          <a-form-item>
            <a-select v-model="query.data.debit" placeholder="收支类型">
              <a-select-option :value="null">全部</a-select-option>
              <a-select-option :value="false">收入</a-select-option>
              <a-select-option :value="true">支出</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>

        <a-col :span="5">
          <a-form-item>
            <a-select
              v-model="query.data.transCode"
              placeholder="业务类型"
              @change="handleChange"
            >
              <a-select-option v-for="d in seloptions" :key="d.value">{{
                d.label
              }}</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>

        <a-col :span="5" :offset="1">
          <a-form-item>
            <a-input placeholder="交易单号" v-model="query.data.transOrderNo" />
          </a-form-item>
        </a-col>

        <a-col :span="6" :offset="1">
          <a-form-item>
            <a-range-picker
              :disabledDate="disabledDate"
              @change="onChange"
              format="YYYYMMDD"
              v-model="momentDate"
            />
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="16" style="margin-bottom: 20px">
        <a-col :span="5" :style="{ textAlign: 'left' }">
          <a-row type="flex" justify="space-between">
            <a-col :span="9">
              <a-button
                class="button_sty"
                type="primary"
                :loading="loading"
                @click="handleSearch(1)"
                >查询</a-button
              >
            </a-col>
            <a-col :span="9">
              <a-button class="button_sty" type="primary" @click="reset"
                >重置</a-button
              >
            </a-col>
          </a-row>
        </a-col>
      </a-row>
    </a-form>
    <a-row>
      <a-col style="float: right">
        <div>
          收入：
          <span style="font-size: 20px; color: #29a576">{{
            Income | cashfilter
          }}</span
          >&ensp;元 &ensp;&ensp; 支出：
          <span style="font-size: 20px; color: #ff943d">{{
            expenditure | cashfilter
          }}</span
          >&ensp;元
        </div>
      </a-col>
    </a-row>
    <a-table
      :scroll="{ y: '38vh' }"
      :columns="columns"
      :dataSource="arr"
      :pagination="false"
      :rowKey="(record) => record.transOrderNo"
    >
      <!-- <a slot="action" slot-scope="text" href="javascript:;void(0)">Delete</a> -->
      <!-- <div slot="expandedRowRender" slot-scope="record" style="margin: 0">
        <span>交易单号：{{}}</span>
        <span>交易手续费：{{}}</span>
        <span>D0服务费：{{}}</span>
        {{record.description}}
      </div>-->
      <span slot="debit" slot-scope="record">
        <!-- <span v-if="record.accountCommand=='recharge'">充值</span>
        <span v-if="record.transCode=='withdraw.api'">代付</span>
        <span v-if="record.transCode=='account.freeze'">冻结</span>
        <span v-if="record.transCode=='account.unfreeze'">解冻</span>
        <span v-if="record.accountCommand=='refund'">退款</span>
        <span v-if="record.transCode=='account.settle'">账户清算</span>
        <span v-if="record.transCode=='balance.pay'">消费</span>
        <span v-if="record.transCode=='balance.transfer'">转账</span>
        <span v-if="record.transCode=='withdraw'">提现</span>-->
        <span>{{ record.debit ? "支出" : "收入" }}</span>
      </span>
      <span slot="amount" slot-scope="record">{{
        record.amount | cashfilter
      }}</span>
      <span slot="afterBalance" slot-scope="record">{{
        record.afterBalance | cashfilter
      }}</span>
      <!-- <span slot="amountone" slot-scope="record" v-if="record!='---'">{{(record/100).toFixed(2)}}</span>
      <span slot="amounttwo" slot-scope="record" v-if="record!='---'">{{(record/100).toFixed(2)}}</span>
      <span slot="afterBalance" slot-scope="record">{{(record/100).toFixed(2)}}</span>-->
    </a-table>
    <!-- <a-pagination @change="onPageChange" :current="pagination.current" :total="pagination.total"
    :pageSize="query.pageSize" style="margin-top: 10px" />-->
    <a-pagination
      v-if="pagination.total > 8"
      @change="onPageChange"
      :current="pagination.current"
      :total="pagination.total"
      :pageSize="query.pageSize"
      style="margin-top: 10px; text-align: center"
    />
  </div>
</template>

<script>
import AForm from "ant-design-vue/es/form/Form";
import ATabs from "ant-design-vue/es/tabs";
// import GlobalFooter from "../../layouts/GlobalFooter";
import AFormItem from "ant-design-vue/es/form/FormItem";
import AInput from "ant-design-vue/es/input/Input";
import AIcon from "ant-design-vue/es/icon";
import AInputGroup from "ant-design-vue/es/input/Group";
import AButton from "ant-design-vue/es/button/button";
import ACol from "ant-design-vue/es/grid/Col";
import ARow from "ant-design-vue/es/grid/Row";
import ACheckbox from "ant-design-vue/es/checkbox/Checkbox";
import AAlert from "ant-design-vue/es/alert/index";
import moment from "moment";
import api from "@/common/api";
const ATabPane = ATabs.TabPane;

const columns = [
  { title: "时间", dataIndex: "ctime", align: "center", width: "15%" },
  {
    title: "交易单号",
    dataIndex: "transOrderNo",
    align: "center",
    width: "15%",
  },
  {
    title: "账户类型",
    dataIndex: "accountType",
    align: "center",
    width: "15%",
  },
  {
    title: "收支",
    scopedSlots: { customRender: "debit" },
    align: "center",
    width: "10%",
  },
  {
    title: "金额（元）",
    scopedSlots: { customRender: "amount" },
    align: "center",
    width: "15%",
  },
  {
    title: "账户余额（元）",
    scopedSlots: { customRender: "afterBalance" },
    align: "center",
    width: "15%",
  }, //debit 0是收入(网上钱到账户)1是支出(账户的钱拿走了)
  // { title: "类型", dataIndex: "transName", align: "center", width: "10%" },
  { title: "备注", dataIndex: "remark", align: "center", width: "20%" },
];

const data = [{}];
const newday = new Date();
export default {
  name: "Login",
  components: {
    AAlert,
    ACheckbox,
    ACol,
    ARow,
    AButton,
    AInputGroup,
    AIcon,
    AInput,
    AFormItem,
    // GlobalFooter,
    ATabPane,
    ATabs,
    AForm,
  },
  data() {
    return {
      today: new Date(),
      data,
      columns,
      momentDate: null,
      list: {},
      query: {
        data: {
          debit: null,
          startDate: "",
          endDate: "",
          transCode: "all",
          transOrderNo: "",
        },
        page: 1,
        pageSize: 8,
      },
      visible: false,
      form: this.$form.createForm(this),
      error: "",
      loginpwd: "",
      loginpwd2: "",
      login: false,
      loading: false,
      arr: [],
      formItemLayout: {
        labelCol: {
          xs: { span: 24 },
          sm: { span: 5 },
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 20 },
          md: { span: 16 },
        },
      },
      pagination: { current: null, total: null },
      seloptions: [
        { value: "all", label: "全部" },
        // { value: "recharge", label: "充值" },
        // { value: "withdraw.api", label: "代付" },
        // { value: "account.freeze", label: "冻结" },
        // { value: "account.unfreeze", label: "解冻" },
        // { value: "refund", label: "退款" },
        // { value: "account.settle", label: "账户清算" },
        // { value: "balance.pay", label: "消费" },
        // { value: "balance.transfer", label: "转账" },
        // { value: "withdraw", label: "提现" }
      ],
      expenditure: "0",
      Income: "0",
      incomeselect: "sss1",
    };
  },
  filters: {
    nameFilter(value) {
      if (value) {
        return "*" + value.substring(1, value.length);
      }
      return "";
    },
    phoneFilter(value) {
      if (value) {
        return (
          value.substring(0, 3) + "****" + value.substring(7, value.length)
        );
      }
      return "";
    },

    timeFilter: function (value) {
      if (value) {
        let year = value.substring(0, 2);
        let mouth = value.substring(2, 4);
        let day = value.substring(4, 6);
        return year + ":" + mouth + ":" + day;
      }
    },
    AccountNofilter(value) {
      if (value) {
        var reg = /.*(.{4})$/;
        return value.replace(reg, "**** **** **** ***$1");
      }
    },
    cashfilter(value) {
      return parseFloat(value / 100).toFixed(2);
    },
  },
  watch: {},
  computed: {},
  created() {
    this.statusQuery();
  },
  mounted() {
    this.handleSearch(1);
  },
  methods: {
    onPageChange: function (page, pageSize) {
      console.info(page, pageSize);
      this.query.page = page;
      this.query.pageSize = pageSize;
      this.handleSearch(page);
    },
    moment,
    disabledDate(current) {
      return current > moment().subtract(0, "day");
    },
    onChange(date, dateString) {
      console.log(date, dateString);
      this.query.data.startDate = dateString[0];
      this.query.data.endDate = dateString[1];
    },
    reset() {
      this.query.data = {
        debit: null,
        startDate: "",
        endDate: "",
        transCode: "all",
        transOrderNo: "",
      };
      this.momentDate = null;
    },
    conexport() {},
    callback() {},
    handleSearch(page) {
      this.loading = true;
      // console.info(this.query)
      this.query.page = page;
      this.$axios
        .post("/agent/transaction/accountDetail/list", this.query)
        .then(
          (res) => {
            console.log(res);
            this.loading = false;
            if (res.data.code == "OK") {
              this.arr = [];
              this.list = res.data.data.list;
              this.arr = this.list;

              this.pagination.current = res.data.data.current;
              this.pagination.total = res.data.data.total;

              this.expenditure = res.data.data.outcome;
              this.Income = res.data.data.income;
              // for (var i = 0; i < this.list.length; i++) {
              //   if (this.list[i].debit == false) {
              //     this.arr.push({
              //       key: i, transDate: this.list[i].transDate,
              //       transOrderNo: this.list[i].transOrderNo,
              //       transCode: this.list[i].transCode,
              //       // amountone: (this.list[i].amount / 100).toFixed(2),
              //       // amounttwo: "---",
              //       afterBalance: (this.list[i].afterBalance / 100).toFixed(2),
              //       accountCommand: this.list[i].accountCommand
              //     });
              //   } else {
              //     this.arr.push({
              //       key: i, transDate: this.list[i].transDate,
              //       transOrderNo: this.list[i].transOrderNo,
              //       transCode: this.list[i].transCode,
              //       amountone: "---",
              //       amounttwo: (this.list[i].amount / 100).toFixed(2),
              //       afterBalance: (this.list[i].afterBalance / 100).toFixed(2),
              //       accountCommand: this.list[i].accountCommand
              //     });
              //   }

              // }
            } else {
              this.arr = [];
            }
          },
          (err) => {
            this.loading = false;
          }
        );
    },
    statusQuery() {
      let data = {
        groupCode: "agent_account",
      };
      api.statusQuery(
        data,
        (res) => {
          console.log(res);
          if (res.code == "OK") {
            let statusList = res.list;
            this.seloptions = [{ value: "all", label: "全部" }];
            statusList.forEach((item, index) => {
              let itemList = {
                value: item.value,
                label: item.label,
              };
              this.seloptions.push(itemList);
            });
          } else {
          }
        },
        (err) => {}
      );
    },
    handleChange(value) {
      console.log(value);
    },
    gologin() {
      this.visible = false;
      this.$router.push("/home");
    },
  },
};
</script>

<style lang="less" scoped>
span {
  cursor: pointer;
}

.formGroupTitle {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 20px;
}

.ant-tabs-nav {
  float: right;
}

.content4 {
  display: flex;
  margin-bottom: 20px;

  .conleft {
    font-size: 16px;
    font-weight: 600;
    width: 180px;
  }

  .conright {
    padding: 0 20px;

    span {
      margin-right: 20px;
    }
  }
}

.button_sty {
  width: 100%;
}
</style>